<div class="{{ option.prefixCls }}-mask {{ option.maskTransitionName }}"></div>
<div
  role="dialog"
  class="{{ option.prefixCls }}-wrap {{ option.transitionName }}"
  (click)="option.maskClose(-1, 0, $event)"
>
  <div role="document" class="{{ option.prefixCls }}" [ngClass]="showShare(option)">
    <div class="{{ option.prefixCls }}-content">
      <button aria-label="Close" class="{{ option.prefixCls }}-close">
        <span class="{{ option.prefixCls }}-close-x"></span>
      </button>
      <div class="{{ option.prefixCls }}-body">
        <div>
          <ng-container *ngIf="!isNoTitle(option.title)">
            <ng-template *ngIf="isTemplateRef(option.title)" [ngTemplateOutlet]="option.title"></ng-template>
            <h3 *ngIf="!isTemplateRef(option.title)" class="{{ option.prefixCls }}-title">{{ option.title }}</h3>
          </ng-container>
          <ng-container *ngIf="!isNoTitle(option.message)">
            <ng-template *ngIf="isTemplateRef(option.message)" [ngTemplateOutlet]="option.message"></ng-template>
            <div *ngIf="!isTemplateRef(option.message)" class="{{ option.prefixCls }}-message">
              {{ option.message }}
            </div>
          </ng-container>
          <ng-container [ngSwitch]="option.flag">
            <div *ngSwitchCase="'NORMAL'" class="{{ option.prefixCls }}-button-list" role="group">
              <ng-container *ngFor="let item of option.options; let i = index">
                <div
                  TouchFeedbackDirective
                  class="{{ option.prefixCls }}-button-list-item"
                  [className]="setActiveClassName(option, 'button-list-item')"
                >
                  <div
                    *ngIf="option.destructiveButtonIndex !== i && option.cancelButtonIndex !== i"
                    class="{{ option.prefixCls }}-button-list-item"
                    (click)="option.onPress(i, 0, $event)"
                  >
                    {{ item }}
                  </div>
                  <div
                    *ngIf="option.destructiveButtonIndex === i"
                    class="{{ option.prefixCls }}-button-list-item {{ option.prefixCls }}-destructive-button"
                    (click)="option.onPress(i, 0, $event)"
                  >
                    {{ item }}
                  </div>
                  <div
                    *ngIf="option.cancelButtonIndex === i"
                    class="{{ option.prefixCls }}-button-list-item {{ option.prefixCls }}-cancel-button"
                    (click)="option.onPress(i, 0, $event)"
                  >
                    {{ item }}
                    <span class="{{ option.prefixCls }}-cancel-button-mask"></span>
                  </div>
                </div>
              </ng-container>
            </div>
            <div *ngSwitchCase="'SHARE'" class="{{ option.prefixCls }}-share {{ option.prefixCls }}-share-content">
              <div *ngIf="!isArray(option.options, option.options[0])" class="{{ option.prefixCls }}-share-list">
                <ng-container *ngFor="let item of option.options; let i = index">
                  <div class="{{ option.prefixCls }}-share-list-item" (click)="option.onPress(i, 0, $event)">
                    <div class="{{ option.prefixCls }}-share-list-item-icon">
                      <ng-template *ngIf="isTemplateRef(item.icon)" [ngTemplateOutlet]="item.icon"></ng-template>
                      <div *ngIf="!isTemplateRef(item.icon)" [innerHTML]="item.icon | safeHTML"></div>
                    </div>
                    <div class="{{ option.prefixCls }}-share-list-item-title">{{ item.title }}</div>
                  </div>
                </ng-container>
              </div>
              <ng-container *ngIf="isArray(option.options, option.options[0])">
                <div
                  *ngFor="let items of option.options; let rowIndex = index"
                  class="{{ option.prefixCls }}-share-list"
                >
                  <ng-container *ngFor="let item of items; let i = index">
                    <div class="{{ option.prefixCls }}-share-list-item" (click)="option.onPress(i, rowIndex, $event)">
                      <div class="{{ option.prefixCls }}-share-list-item-icon">
                        <ng-template *ngIf="isTemplateRef(item.icon)" [ngTemplateOutlet]="item.icon"></ng-template>
                        <div *ngIf="!isTemplateRef(item.icon)" [innerHTML]="item.icon | safeHTML"></div>
                      </div>
                      <div class="{{ option.prefixCls }}-share-list-item-title">{{ item.title }}</div>
                    </div>
                  </ng-container>
                </div>
              </ng-container>
              <div
                TouchFeedbackDirective
                [className]="setActiveClassName(option, 'share-cancel-button')"
                class="{{ option.prefixCls }}-share-cancel-button"
              >
                {{ option.cancelButtonText }}
              </div>
            </div>
          </ng-container>
        </div>
      </div>
    </div>
  </div>
</div>
